<template>
    <div class="common-layout">
        <el-container>
            <el-header><Header /></el-header>
            <el-container>
                <el-aside width="auto"><Sidebar /></el-aside>
                <el-main>
                    <router-view v-slot="{ Component }"
                        ><transition name="fade" mode="out-in">
                            <component
                                :is="Component"
                            /> </transition></router-view
                ></el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import Header from '../components/header.vue'
import Sidebar from '../components/sidebar.vue'
</script>

<style lang="scss" scoped>
.common-layout {
    --el-color-primary: #da9233;
    height: 100vh;
    user-select: none;
}
.el-header {
    height: 8vh;
    width: 100vw;
    padding: 0;
}
.el-container {
    height: 100%;
    .el-aside {
        padding: 0;
    }
    .el-main {
        padding: 0;
    }
}
</style>
